<template>
	<view class="link-item">
		<view class="cu-item arrow" @click="$emit('click')">
			<view class="content">
				<text v-if="icon" :class="['cuIcon-' + icon].concat(typeof iconCls === 'string' ? [iconCls] : iconCls)" ></text>
				<slot name="text"></slot>
			</view>
			<view class="action">
				<slot name="right"></slot>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			iconCls: {
				type: Array | String,
				default() {
					return []
				}
			},
			icon: {
				type: String,
				default() {
					return ''
				}
			}
		},
		data() {
			return {
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.link-item>.cu-item.arrow {
	    padding-right: 45px;
	}
	.link-item>.cu-item {
	    position: relative;
	    display: flex;
	    padding: 0 15px;
	    min-height: 50px;
	    background-color: #ffffff;
	    justify-content: space-between;
	    align-items: center;
	}
	.link-item>.cu-item {
	    transition: all .6s ease-in-out 0s;
	    -webkit-transform: translateX(0px);
	    transform: translateX(0px);
	}
	.link-item>.cu-item.arrow:before {
	    position: absolute;
	    top: 0;
	    right: 15px;
	    bottom: 0;
	    display: block;
	    margin: auto;
	    width: 15px;
	    height: 15px;
	    color: #8799a3;
	    content: "\e6a3";
	    text-align: center;
	    font-size: 17px;
	    font-family: cuIcon;
	    line-height: 15px;
	}
	.link-item>.cu-item:after, .link-item>.cu-item:after {
	    position: absolute;
	    top: 0;
	    left: 0;
	    box-sizing: border-box;
	    width: 200%;
	    height: 200%;
	    border-bottom: 0.5px solid #ddd;
	    border-radius: inherit;
	    content: " ";
	    -webkit-transform: scale(.5);
	    transform: scale(.5);
	    -webkit-transform-origin: 0 0;
	    transform-origin: 0 0;
	    pointer-events: none;
	}
	.link-item>.cu-item .content>text[class*=cuIcon] {
	    display: inline-block;
	    margin-right: 5px;
	    width: 1.6em;
	    text-align: center;
	}
</style>
